import React, { useState, useEffect } from 'react'
import api from "../../../api"
import SearchListView from "../SearchListView"
import LoadMore from "../../../components/LoadMore"



// 获取数据
export default function SearchList ({ keywords }) {
  let newList = [];

  const [searchData, setSearchData] = useState([]);
  const [hasMore, setHasMore] = useState(true)


  function http () {
    api.search({ keywords }).then(res => {
      if (res.data.status === 200) {
        newList = [...newList, ...res.data.result.data]
        setSearchData(newList)
        setHasMore(res.data.result.hasMore)
        console.log(newList);
        console.log(hasMore);
      }
    }).catch(error => {
      console.log(error);
    })
  }
  useEffect(() => {
    http()
  }, [keywords])

  function loadMoreHandle () {
    // console.log(searchData);
    console.log("加载更多");
    http();
  }
  // console.log(searchData);
  return (
    <div>
      <ul>
        {
          searchData.length > 0 ?
            <SearchListView data={searchData} /> :
            <div>等待加载中</div>
        }
      </ul>
      <LoadMore hasMore={hasMore} onLoadMore={loadMoreHandle} isTrue="true" />
    </div>
  )
}
